<template>
<div class="aside-menu-box" v-show="!isCollapse">
<!-- ant design 和 TDesign 类似-->
<!-- arco design --> 
12312
123
123
1
2312
3

</div>
<div class="toggle-sidebar-wrapper"  @click="handleToggle">
    <span v-show="isCollapse" style="padding: 0 10px 0 10px;">
        <el-icon><Right /></el-icon>
    </span>
    <span v-show="!isCollapse" style="padding: 0 10px 0 10px;">
        <el-icon><Back /></el-icon>
    </span>
</div>
</template>

<script setup>
import { ref } from 'vue';


const isCollapse = ref(false);

const handleToggle = async () => {
    if (isCollapse.value == true) {
        isCollapse.value = false;
        removeClass('toggle-sidebar-wrapper', 'sidebar-collapse');
    } else {
        isCollapse.value = true;
        addClass('toggle-sidebar-wrapper', 'sidebar-collapse');
    }
}


</script>

<style scoped>
.aside-menu-box {
    height: calc(100vh - 60px);
    width: var(--sidebar-space);
    box-shadow: 2px 0 8px rgba(0, 0, 0, .15);
}

.toggle-sidebar-wrapper {
    position: fixed;
    top: var(--navbar-height);
    bottom: 0;
    inset-inline-start: var(--sidebar-space);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    transition: inset-inline-start var(--transform-transition);
}

.toggle-sidebar-wrapper:hover {
    background: #7f7f7f0d;
    cursor: pointer;
}

.sidebar-collapse {
    inset-inline-start: 0;
}
</style>